<template>
  <a-modal
    :title="title"
    :visible="visible"
    width="320px"
    cancelText="取消"
    okText="确定"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <CommonForm ref="commonFormRef" :formData="formData" :formJson="formJson" />

  </a-modal>
</template>

<script>
import { getBoardCategoryTree, add, editAttr } from "@/api/dashboard/board"
import CommonForm from "@/components/CommonForm"
import { defaultStoreData } from "@/views/dashboard/EditDashboard/LowCode/lib/const"

export default {
  components: {
    CommonForm
  },
  data() {
    return {
      visible: false,
      formData: {
        type: 1,
        name: '',
        parentId: undefined,
      },
      parentData: [],
      parentIdOptions: [],
      title: "新增",
      type: 'add'
    }
  },
  computed: {
    formJson() {
      const type = {
        type: "radio-group",
        label: "类型",
        fieldName: "type",
        extraConfig: {
          className: "row"
        },
        options: [
          {
            label: '仪表板',
            value: 1
          },
          {
            label: '分类',
            value: 2
          }
        ],
        dataType: Number
      }
      const name = {
        type: "input",
        label: "名称",
        fieldName: "name",
        extraConfig: {
          className: "row"
        },
        rules: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        dataType: String
      }
      const parentId = {
        type: "tree-select",
        label: "保存位置",
        fieldName: "parentId",
        extraConfig: {
          className: "row",
          treeData: this.parentIdOptions,
          replaceFields: {
            children: 'children',
            title: 'name',
            key: 'id',
            value: 'id'
          }
        },
        dataType: Number
      }
      switch (this.type) {
        case 'add':
          return [type, name, parentId]
        case 'move':
          return [parentId]
        case 'reName':
          return [name]
        default:
          return []
      }
    }
  },
  created(){
    // 获取保存位置
    getBoardCategoryTree()
    .then(data => {
      this.parentIdOptions = data
    })
  },
  methods: {
    handleOk() {
      if (this.type === 'add'){
        this.formData.itemList = []
        this.formData.pageOperation = JSON.stringify({
          componentList: [],
          pageSetting: {
            ...defaultStoreData.pageSetting,
          }
        })
      }
      const callBack = this.type === 'add' ? add : editAttr
      this.$refs.commonFormRef.form.validate(valid => {
        if (valid){
          callBack({
            ...this.formData,
            parentId: this.formData.parentId ? this.formData.parentId : 0
          })
          .then(data => {
            if (this.type === 'add'){
              this.$message.success("新增成功")
              this.handleCancel()
              this.$router.push({ path: '/dashboard/editDashboard', query: {id: data.id} })
            }
            else {
              this.handleCancel()
              this.$message.success("重命名成功")
            }
          })
        }
      })
    },
    handleCancel(){
      this.visible = false
      this.formData = {
        type: 1,
        name: '',
        parentId: undefined,
      }
      this.$emit("update")
    },
    show(type = 'add', val) {
      switch (type) {
        case 'add': {
          this.title = '新增'
          this.formData = {
            ...val,
            type: 1
          }
          break
        }
        case 'move':
        case 'reName': {
          this.title = '移动到'
          this.formData = {
            ...val,
            parentId: val.parentId || undefined
          }
          break
        }
        default : {
          this.title = '新增'
          this.type = 'add'
        }
      }
      this.type = type
      this.visible = true
    },
  }
}
</script>

<style lang="less" scoped>
/deep/.row {
  // height: 60px;
  margin-bottom: 10px;
  margin-top: 6px;
}
</style>
